<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="format-detection" content="telephone=no" />
    <title>关联算力包</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #f8f8f8;
        }

        p,
        span {
            line-height: 100%;
        }

        html,
        body {
            height: 100%;
            width: 100%;
            font-size: 0.26rem;
        }

        ul,
        li {
            text-decoration: none;
            display: block;
        }

        .loadToast {
            padding: 0.25rem 0;
            color: #9e9b9b;
            text-align: center;
            font-size: 0.24rem;
            padding-bottom: 1.4rem
        }

        .container {
            color: #262626;
            min-height: 100%;
            position: relative
        }

        .sec1 {
            background: #fff;
            padding: 0.34rem 0.29rem;
            background: url("../../image/ag_bg.png") center center no-repeat;
            background-size: 100% 100%;
        }

        .topIntroduce {
            margin: 0 auto;
            color: #fff;
            font-size: 0.24rem;
            line-height: 210%;
            padding: 0.3rem;
            border-radius: 0.06rem
        }

        #list li {
            padding: 0 0.29rem;
            background: #fff;
            margin-top: 0.16rem;
        }

        #list li:first-child {
            margin-top: 0;
        }

        .notcheck {
            width: 0.4rem;
            height: 0.4rem;
            display: block;
            border-radius: 50%;
            border: 0.01rem solid#bbb;
            float: left
        }

        .ischeck {
            width: 0.4rem;
            height: 0.4rem;
            display: block;
            border-radius: 50%;
            background: url("../../image/checknew.png");
            background-size: 100% 100%;
            border: 0;
            float: left
        }

        .mc_name {
            font-size: 0.3rem;
            padding-left: 0.18rem;
            float: left
        }

        .p1 {
            padding-top: 0.31rem;
            position: relative;
            overflow: hidden
        }

        .p1>span {
            line-height: 0.35rem;
            vertical-align: middle
        }

        .p1>.mcSts {
            font-size: 0.24rem;
            float: right;
        }

        .p1>.isRun {
            color: #42AA79;
        }

        .ifLock {
            padding-left: 0.53rem;
            padding-top: 0.1rem;
        }

        .ifLock>span {
            padding: 0.1rem 0.12rem;
            border-radius: 0.04rem;
            display: inline-block;
            background: rgba(255, 210, 210, 0.26);
            color: #E94A4A;
            font-size: 0.2rem;
        }

        .detailList>p {
            padding-top: 0.31rem;
        }

        .detail {
            overflow: hidden;
            position: relative;
            padding-top: 0.39rem;
        }

        .detail .title {
            color: #8E979E;
            font-size: 0.22rem;
        }

        .detail .content {
            color: #262626;
            font-size: 0.24rem;
        }

        .detail>span {
            float: left;
            line-height: 0.25rem
        }

        .detail>span:last-child {
            float: right;
        }

        .detail>span:first-child {
            width: 1.1rem;
        }

        .detail>span:nth-child(3) {
            padding-left: 1.3rem;
            display: inline-block;
            width: 2.35rem;
        }

        .detail>span:nth-child(2) {
            width: 3rem;
            padding-left: 0.1rem
        }

        .detail>.agreementTime {
            font-size: 0.22rem;
        }

        .detailList .detail:last-child {
            padding-top: 0.25rem;
            padding-bottom: 0.35rem;
        }

        .orderNumber {
            padding: 0.2rem 0;
            padding-left: 0.38rem;
            color: #595959;
            font-size: 0.24rem;
            border-top: 0.01rem solid #ebebeb;
            background: url("../../image/iconrt.png") left center no-repeat;
            background-size: 0.24rem 0.25rem;
        }

        #confirm {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            border-top: #F9F9F9;
            height: 1rem;
            z-index: 1;
            border-top: 0.01rem solid #c0c0c0;
        }

        #confirm>span {
            width: 50%;
            float: left;
            font-size: 0.32rem;
            line-height: 1rem;
            text-align: center;
            background: #F9F9F9;
        }

        #confirm>.commit {
            background: #FFD203
        }
    </style>
</head>

<body>
    <div class="container">
        <section class="sec1">
            <div class="topIntroduce">
                1.结算前，关联算力不可进行退单/转让/续单操作；<br>
                2.合约创建后，若算力锁定时间早于结算时间，将自动延长至结算时间；
            </div>
        </section>
        <section id="list">
            <ul id="addTextClass">
            </ul>
        </section>
        <p class="loadToast">到底了...</p>
        <div id="confirm">
            <span class="cancel">取消</span>
            <span class="commit">确认</span>
        </div>
    </div>
</body>

</html>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script type="text/html" id="md">
    {{~it:item:index}}
    <li data-showWorn="false" >
        <p class="p1">
            <span class="checkradio {{=item.isChecked==true ? 'ischeck' :'notcheck'}} " data-showWarn={{=item.isXuqi}} data-chooseId={{=item.id}} data-index={{=index}} data-basePower={{=item.total_power}}></span>
            <span class="mc_name">{{=item.product_name}}</span>
            <span class="mcSts isRun" style="display:inline-block;width:1.5rem;text-align:right;color:{{=item.textColor}};font-size: 0.25rem;display:{{=(item.freeze_num==item.num && item.num !=0)?'none':'inline-block'}};">{{=item.workText}}</span>
        </p>
        <p class="ifLock showIflock{{=index}}" style="display:none;">
            <span>将延长锁定期限</span>
        </p>
        <div class="detailList">
            <p class="detail">
                <span class="title">总金额</span>
                <span class="content leftNum money">
                    {{=item.product_deposit}} {{=item.pay_currency}}
                </span>
                <span class="title">总算力</span><span class="content lowGet">{{=item.total_power}}{{=item.rentpowerUnit}}</span>
            </p>
            <p class="detail">
                <span class="title">开挖时间</span><span class="content agreementTime">{{=item.time_income}}</span>
                <span class="title">基础算力</span><span class="content topGet">{{=item.total_base_power}} {{=item.rentpowerUnit}}</span>
            </p>
            <p class="detail">
                <span class="title" >锁定时间</span><span class="content agreementTime">{{=item.update_time}}</span>
                <span class="title">奖励算力</span><span class="content topGet">{{=item.otherPower}} {{=item.rentpowerUnit}}</span>
            </p>
        </div>
        <p class="orderNumber">
            订单号：<span>{{=item.order_id}}</span>
        </p>
    </li>
    {{~}}
</script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var curPage = 1; totalPage = 0;//页数 总页数
        var getMcArr = app.getSyncStorage("chooseService");
        var pageValue = getMcArr ? JSON.parse(getMcArr) : { chooseArr: [], totalpower: 0 };
        var chooseArr = pageValue.chooseArr;//选择的数据;
        function loadPage(page, isdown) {
            app.ajaxPro({
                url: "insurance/get-order-list",
                values: {
                    token: account.token,
                    page: page,
                    pageSize: 10,
                    currency: "BTC"
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    totalPage = ret.data.totalPage;
                    var getArr = [];
                    if (ret.data.body instanceof Array) {
                    } else if (ret.data.body instanceof Object) {
                        getArr.push(ret.data.body['1']);
                        ret.data.body = getArr;
                    };
                    var newlist = [];
                    ret.data.body.map(function (item) {
                        if (pageValue.chooseArr.indexOf(String(item.id)) != -1) {
                            item.isChecked = true;
                        } else {
                            item.isChecked = false;
                        }
                        if (item.pay_currency == 'USDT') {
                            item.total_deposit = app.sliceNum(item.total_deposit_coin, 4);
                        } else {
                            item.total_deposit = app.sliceNum(item.total_deposit, 2);
                        }
                        if (item.currency_name == "BTC") {
                            item.rentpowerUnit = "T";
                        } else {
                            item.rentpowerUnit = "M";
                        }
                        if (item.is_regular == 0) {
                            item.regularText = "活期";
                        } else {
                            item.regularText = "定期";
                        }
                        if (item.end_time) {
                            //指定时间的时间戳(s)
                            var operTime = app.toSecond(item.end_time);
                            //返回当前时间的时间戳(s)
                            var nowThisTime = app.getCurStamp();
                            var isShowEnd = operTime - nowThisTime;
                            if (item.regular_date_num > 30 && isShowEnd < 604800) {
                                item.showEnd = true;
                            }
                            if (nowThisTime > operTime) {
                                item.showEnd = false;
                            }
                        }
                        // var showBhpcPay = item.total_deposit_coin ? (String(item.total_deposit_coin).split(".")[0] + "." + String(item.total_deposit_coin).split(".")[1].slice(0, 2)) : 0;
                        // item.total_deposit_coin = showBhpcPay;
                        item.total_regular_power = app.accMul(
                            app.moreAccAdd(item.float_power, item.futures_power, item.regular_power, item.coupon_power, item.pe_power, item.td_power),
                            item.num
                        );
                        item.total_power = app.accMul(
                            item.computing_power,
                            item.num
                        );
                        item.total_base_power = app.accMul(
                            item.base_power,
                            item.num
                        );
                        item.otherPower = app.numSub(item.total_power,item.total_base_power);//奖励算力
                        if (item.dragStatus == 1) {
                            item.textColor = "#42aa79"; //挖矿中
                        } else if (item.dragStatus == 0) {
                            item.textColor = "#f3933a"; //待挖
                        } else {
                            item.textColor = "#B8B8B6";
                        }
                        newlist.push(item);
                    })
                    // 渲染模板
                    var temp = doT.template($("#md").text());
                    if (isdown) {
                        $("#addTextClass").html(temp(newlist));
                    } else {
                        $("#addTextClass").append(temp(newlist));
                    }
                    if (curPage == 1 && ret.data.body.length == 0) {
                        $(".loadToast").text("暂时没有相关数据");
                    }
                    if (curPage < totalPage && totalPage > 1) {
                        $(".loadToast").text("加载更多");
                    }
                    if (curPage == totalPage && totalPage > 1) {
                        $(".loadToast").text("没有更多了");
                    }
                } else {
                    app.toast(ret.message)
                }
            });
        }
        loadPage(curPage, true);
        $("#addTextClass").on("click", "li", function () {
            //勾选点击
            var thiz = $(this).find(".checkradio");
            var ischeck = thiz.hasClass('ischeck');//是否选择
            if (ischeck) {
                var canleId = $(thiz).attr("data-chooseId");
                thiz.removeClass('ischeck').addClass('notcheck');
                if ($(thiz).attr("data-showWarn") == "1") {
                    $(".showIflock" + $(thiz).attr("data-index")).hide();
                }
                for (var i = 0; i < chooseArr.length; i++) {
                    if (canleId == chooseArr[i]) {
                        chooseArr.splice(i, 1);
                    }
                }
            }
            else {
                var addId = String($(thiz).attr("data-chooseId"));
                var thisPower = $(thiz).attr("data-basePower");
                if (chooseArr.indexOf(addId) == -1) {
                    chooseArr.push(addId);
                }
                thiz.removeClass('checkst').addClass('ischeck');
                if ($(thiz).attr("data-showWarn") == "1") {
                    $(".showIflock" + $(thiz).attr("data-index")).show();
                }
            }
        });
        app.downRefresh(function () {
            $("#addTextClass").empty();
            curPage = 1;
            totalPage = 0;
            loadPage(curPage, true);
        });
        app.toBottom(function () {
            if (curPage < totalPage) {
                curPage++;
                loadPage(curPage, false);
            }
        });
        $(".cancel").on("click", function () {
            app.closeW();
        });
        function sumArr(arr) {
            var s = 0;
            arr.forEach(function (val, idx, arr) {
                s = app.accAdd(s, val);
            }, 0);
            return s;
        };
        $(".commit").on("click", function () {
            var newPowerall = [];
            $("#addTextClass .checkradio ").each(function () {
                var thiz = $(this);
                if (thiz.hasClass('ischeck')) {
                    newPowerall.push(Number(thiz.attr("data-basePower")));
                }
                thiz = null;
            });
            var totalpower = sumArr(newPowerall);
            var pageValue = {
                chooseArr: chooseArr,
                totalpower: totalpower
            };
            app.trigger("relatedBagNum", pageValue);
            app.setStorage("chooseService", pageValue)
            app.closeW();
        });
    }
</script>